<template>
  <div class="category_page recommend_custom_page footer-page">
    <div class="top_tabs">
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          v-for="item in tabList"
          :key="item.id"
          :label="item.main_title"
          :name="item.id+''"
        >
        </el-tab-pane>
      </el-tabs>
      <el-link
        v-if="tabList.length > 0 && $hasMethod('#add')"
        href="/h5Config/show"
        :underline="false"
        type="primary"
      >添加板块</el-link>
    </div>
    <div class="flex tab_content">
      <div class="flex-1 text-center img_wrapper">
        <el-image :src="require('../../../assets/images/h5-custom.jpg')">
          <div
            slot="error"
            class="image-slot"
          >
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </div>
      <div class="config_wrapper">
        <div
          v-if="!$hasMethod('#edit')"
          class="mask"
        ></div>
        <h5>{{configTitle}}</h5>
        <div class="main">
          <div class="warn-box">
            <svg-icon
              style="margin-right:17px"
              icon-class="warn"
              :size="20"
            />
            <p><span>图片要求！</span><br />商品图片要求PNG格式透明底图片；<br />推荐位背景图尺寸650×280px；<br />图片尺寸要求500×500px；</p>
          </div>
          <div class="input_wrapper">
            <div class="flex">
              <label class="flex align-center justify-center">主标题</label>
              <el-input
                type="text"
                placeholder="请输入主标题"
                v-model="submitForm.main_title"
                :maxlength="5"
                clearable
              >
              </el-input>
            </div>
            <div class="flex">
              <label class="flex align-center justify-center">副标题</label>
              <el-input
                type="text"
                placeholder="请输入副标题"
                v-model="submitForm.sub_title"
                :maxlength="10"
                clearable
              >
              </el-input>
            </div>
          </div>
          <p class="title">一级推荐位</p>
          <crop-upload
            style="width: 360px;margin: 20px auto;"
            show-type="photo"
            :init-val="submitForm.background_img"
            wrapper-width="360px"
            wrapper-height="115px"
            :img-width="650"
            :img-height="280"
            :photo-width="360"
            :photo-height="115"
            @setVal="(val)=>{submitForm.background_img=val}"
          ></crop-upload>
          <goods-form
            :form-data="goodsData"
            :show-checked-tool="true"
            :show-tool="$hasMethod('#edit')"
          ></goods-form>
          <p class="title">二级推荐位</p>
          <template v-for="(item, index) in dataList">
            <goods-link
              :key="index"
              :goods-data="item"
              :show-tool="$hasMethod('#edit')"
              @handleDelete="deleteGoods(index)"
              @upSort="upSort(index)"
              @downSort="downSort(index)"
            ></goods-link>
          </template>
          <div
            v-if="dataList.length < 8 && $hasMethod('#edit')"
            class="add-div"
            @click="openSelect"
          >
            <i class="el-icon-plus"></i>添加商品({{dataList.length}}/8)
          </div>
        </div>
      </div>
    </div>
    <div
      class="page-footer-btns"
      v-if="$hasMethod('#edit')"
    >
      <el-button
        size="small"
        @click="reset"
      >重置</el-button>
      <el-button
        size="small"
        type="primary"
        @click="submit"
      >保存</el-button>
    </div>
    <goods-dialog
      ref="goodsDialog"
      :multiple="true"
      :maxNum="8"
      :show-checked-tool="true"
      @setSelect="setSelect"
    ></goods-dialog>
  </div>
</template>

<script>
import { h5HomeCustomPlateList, getCustomModuleGoodsByModuleid, addOrEditCustomModuleGoods } from "@/api/recommend";
import goodsForm from "../../recommend/compoments/form";
import goodsDialog from "@/components/goodsDialog.vue";
import goodsLink from "../../recommend/compoments/goodsLink";
import cropUpload from "@/components/cropUpload";
export default {
  components: { goodsForm, goodsDialog, goodsLink, cropUpload },
  data() {
    return {
      activeName: "",
      tabList: [],
      dataList: [],
      submitForm: {
        main_title: "",
        sub_title: "",
        background_img: "",
      },
      goodsData: {
        goods_id: null,
        goods_img: "",
        goods_name: "",
        goods_title: "",
        goodsData: null
      }
    }
  },
  computed: {
    configTitle() {
      const tab = this.tabList.find(item => item.id == this.activeName);
      return tab ? tab.main_title : "自定义板块配置";
    }
  },
  methods: {
    // 升序
    upSort(index) {
      if (index === 0) {
        return;
      }
      let item = this.dataList[index];
      this.$set(this.dataList, index, this.dataList[index - 1]);
      this.$set(this.dataList, index - 1, item);
    },
    // 降序
    downSort(index) {
      if (index === this.dataList.length - 1) {
        return;
      }
      let item = this.dataList[index];
      this.$set(this.dataList, index, this.dataList[index + 1]);
      this.$set(this.dataList, index + 1, item);
    },
    // 删除商品
    deleteGoods(index) {
      this.dataList.splice(index, 1);
    },
    // 添加商品
    openSelect() {
      this.$refs.goodsDialog.dialogVisible = true;
      this.$refs.goodsDialog.selectItems = [...this.dataList];
    },
    // 设置选中
    setSelect(goodsList) {
      this.dataList = goodsList;
    },
    submit() {
      // 校验
      if (!this.submitForm.main_title) {
        this.$message({
          message: "主标题不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.submitForm.sub_title) {
        this.$message({
          message: "副标题不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.submitForm.background_img) {
        this.$message({
          message: "一级推荐位背景图不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.goodsData.goods_img) {
        this.$message({
          message: "一级推荐位商品图片不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.goodsData.goods_name) {
        this.$message({
          message: "一级推荐位商品名称不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.goodsData.goods_id) {
        this.$message({
          message: "一级推荐位请选择商品链接",
          type: "warning"
        });
        return;
      }
      // 保存
      const goods_arr = this.dataList.map(obj => obj.goods_id);
      const params = {
        module_id: this.activeName,
        goodsidStr: goods_arr.join(','),
        ...this.submitForm,
        ...this.goodsData
      }
      delete params.goodsData
      addOrEditCustomModuleGoods(params).then(res => {
        this.getData();
      })
    },
    reset() {
      // 重置
      this.getData();
    },
    handleClick(tab) {
      this.getData();
    },
    // 获取商品列表
    getData() {
      getCustomModuleGoodsByModuleid(this.activeName).then(res => {
        for (let key in this.goodsData) {
          this.goodsData[key] = res[key] || "";
        }
        for (let key in this.submitForm) {
          this.submitForm[key] = res[key] || "";
        }
        this.dataList = res.goods;
      })
    },
    getTabs() {
      h5HomeCustomPlateList().then(res => {
        this.tabList = res;
        this.activeName = this.tabList[0].id + "";
        this.getData();
      });
    },
  },
  mounted() {
    this.getTabs();
  }
}
</script>

<style lang="scss" scoped>
.recommend_custom_page {
  .config_wrapper {
    & > div label {
      width: 70px;
    }
    .input_wrapper {
      margin-left: 0;
    }
  }
}
</style>
